<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="item.component">
        <component :is="components[item.component]" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { 'id': 1, 'name': '基础信息', 'component': 'basic' },
        { 'id': 2, 'name': '修改密码', 'component': 'customs' }
      ],
      activeName: 'basic',
      components: {
        'basic': () => import('./component/basic'),
        'customs': () => import('./component/customs')
      }
    }
  },
  created() {

  }
}
</script>

<style scoped>

</style>
